<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>樣本送出</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
</head>
<body>
  <input type="hidden" id="LOCATIONID" value="">
<div class="ok-body">
	<!--模糊搜索区域-->
	<div class="layui-row">
		<form class="layui-form ok-search-form">
		
			<div class="layui-form-item">
		    	<div class="layui-inline">
					<label class="layui-form-label">Location:</label>
					<label class="layui-form-label" id ="location" style="width:140px;font-size:large; text-align: left;"></label>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">掃瞄日期</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" placeholder="掃瞄日期" autocomplete="off" id="CREATETIME" name="CREATETIME">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">組標籤</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" placeholder="組標籤" autocomplete="off" id="CODE" name="CODE">
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<button class="layui-btn" lay-submit="" lay-filter="search">
							<i class="layui-icon">&#xe615;</i>
						</button>
					</div>
				</div>
			</div>
		</form>
	</div>
	<!--数据表格-->
	<table class="layui-hide" id="tableId" lay-filter="tableFilter" ></table>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
     var timestamp = "";  
	layui.use(["element", "jquery", "table", "form", "laydate", "okLayer", "okUtils"], function () {
		let table = layui.table;
		let form = layui.form;
		let laydate = layui.laydate;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;		
		let $ = layui.jquery;
		
		
		function OpenLocation(){
		    okLayer.dialogOpen({
	            id: "SelectForm",
	            title: '選擇站點',
	            url: 'location.html',
	            width :'40%',
	            height :'60%',
	            btn: ['确认'],
	            closeBtn : 0,
	            callBack: function (iframeId) { 
	                var index = layer.getFrameIndex(iframeId);  
	                var locationVal = window["layui-layer-iframe" + index].GetlocationVal();
	                var locationtext = window["layui-layer-iframe" + index].Getlocationtext(); 
	                $("#location").html(locationtext);
	                $("#LOCATIONID").val(locationVal);
	                layer.close(index);
	                
	                var  searchcondition =JSON.stringify({LOCATIONID:locationVal});
	                stable.reload({	    			
	    				where: {searchcondition: searchcondition},
	    				page: {curr: 1}
	    			});
	              
	            }
			})
		}		
		OpenLocation();
		okLoading.close($);
		laydate.render({elem: "#CREATETIME",format: 'yyyy-MM-dd'});
		var  searchcondition =JSON.stringify({LOCATION:0});
		let stable = table.render({
			elem: '#tableId',
			url: "../../QrCodeServlet?method=getList",	
			limit: 10,
			size: "sm",
			page: true,
			defaultToolbar: false,
			where:{searchcondition: searchcondition},
			toolbar: "#toolbarTpl",		
			cols: [[
				{title: "ID", type :"numbers", width: 160},
				{field: "ID", title: "id", width: 100, hide: true},
				{field: "CODE", title: "GROUP CODE", width: 200},
				{field: "S_CREATETIME", title: "TIME", width: 200},
				{field: "LOCATION", title: "LOCATION", width: 200},
				{title: "操作", width: 100, align: "center", fixed: "right", templet: "#operationTpl"}
			]],
			done: function (res, curr, count) {
				console.info(res, curr, count);
			}
		});

		form.on("submit(search)", function (data) {
		    var searchdata = data.field;
		    searchdata["LOCATIONID"] = $("#LOCATIONID").val();
		    var  searchcondition =JSON.stringify(searchdata);
		    stable.reload({
				where: {searchcondition: searchcondition},
				page: {curr: 1}
			});
			return false;
		});

		table.on("toolbar(tableFilter)", function (obj) {
			switch (obj.event) {
				case "QrcodeScan":
				    QrcodeScan();
					break;
				case "Export":
				    Export();
					break;	
				case "ChangeLocation":
				    ChangeLocation();
					break;
			}
		});
		table.on("tool(tableFilter)", function (obj) {
			let data = obj.data;
			switch (obj.event) {
				case "add":
				    add(data);
					break;
				case "del":
					del(data.ID);
					break;
			}
		});
		function ChangeLocation() {
		    OpenLocation();		    
		}
		$("#location").click(function(){
		    OpenLocation();
		})
		
		function Export() {			
			var singtamp = $.now();
			var CREATETIME = $("#CREATETIME").val();
			var CODE = $("#CODE").val();
		    var LOCATIONID = $("#LOCATIONID").val();
	        var strurl=  "../../QrCodeServlet?method=Export&CREATETIME="+CREATETIME+"&CODE="+CODE+"&LOCATIONID="+LOCATIONID+"&singtamp="+singtamp;
	        $('#btnExcel').attr("disabled",true);
	               window.location.href=strurl;
		}

		function QrcodeScan() {
		    var LOCATIONID = $("#LOCATIONID").val();
			okLayer.open("GROUP LABEL SCAN", "qrcode-form.html?LOCATION="+LOCATIONID, "60%", "90%", null, function () {
			    stable.reload();
			})
		}

		function add(data) {
		    okLayer.open("預約編號掃描,GROUP LABEL "+data.CODE , "regCode-form.html?GROUP_CODE_ID="+data.ID, "50%", "90%", null, function () {
				    stable.reload();
			})
		}

		function del(ID) {
			okLayer.confirm("SURE DELETE ?", function () {			
				okUtils.ajax("QrCodeServlet?method=delete", "get", {ID: ID}, true).done(function (response) {
				    stable.reload();
					okUtils.tableSuccessMsg(response.msg);
				}).fail(function (error) {
					console.log(error)
				});
			})
		}
	})
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="QrcodeScan">GROUP LABEL 掃瞄</button>	
	    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="Export"><i class="layui-icon">&#xe621;</i>導出 Excel</button>	
        <button class="layui-btn layui-btn-sm layui-btn" lay-event="ChangeLocation"><i class="layui-icon">&#xe715;</i>更改地點</button>		
	</div>
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
	<a href="javascript:" title="编辑" lay-event="add"><i class="layui-icon">&#xe624;</i></a>
	<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
</body>
</html>
